<template>
	<view class="page">
		<!-- 顶部成功提示 -->
		<view class="success-header">
			<view class="success-title">拼单成功</view>
			<view class="success-subtitle">等待商家发货</view>
			<image class="success-icon" src="/static/svg/check-circle-white.svg" mode="aspectFit"></image>
		</view>
		
		<!-- 地址信息 -->
		<view class="address-info">
			<image class="location-icon" src="/static/svg/location-icon.svg" mode="aspectFit"></image>
			<view class="address-content">
				<view class="user-info">
					<text class="user-name">李小花</text>
					<text class="user-phone">18851387766</text>
				</view>
				<view class="user-address">广东省广州市大华区明离路科技园880号</view>
			</view>
		</view>
		
		<!-- 拼团信息 -->
		<view class="group-info">
			<view class="group-icon-wrap">
				<image class="group-user-icon" src="/static/svg/default-avatar.svg" mode="aspectFit"></image>
			</view>
			<view class="group-status">拼团成功</view>
			
			<view class="group-members">
				<view class="leader-container">
					<image class="member-avatar" src="/static/svg/default-avatar.svg" mode="aspectFit"></image>
					<view class="leader-tag">团长</view>
				</view>
				<image class="member-avatar" src="/static/svg/default-avatar.svg" mode="aspectFit"></image>
			</view>
			
			<view class="group-detail-btn" @click="goToGroupDetail">拼团详情</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="product-card">
			<view class="product-info">
				<image class="product-image" src="/static/svg/matcha-cake.svg" mode="aspectFit"></image>
				<view class="product-detail">
					<view class="product-name">艾丽莎抹茶蛋糕早点低塘健康</view>
					<view class="product-package">实惠装</view>
					<view class="product-price">
						<text class="price-symbol">¥</text>
						<text class="price-value">136</text>
						<text class="product-quantity">×1</text>
					</view>
				</view>
			</view>
			<view class="group-tag">3人团</view>
		</view>
		
		<!-- 订单金额信息 -->
		<view class="order-amount">
			<view class="amount-item">
				<text>商品总额:</text>
				<text>¥136.00</text>
			</view>
			<view class="amount-item">
				<text>运费:</text>
				<text>¥0.00</text>
			</view>
			<view class="amount-item">
				<text>商品优惠:</text>
				<text>-¥10.00</text>
			</view>
			<view class="amount-item actual-payment">
				<text>实付款:</text>
				<text class="payment-value">¥120.00</text>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-item">
				<text>订单号:</text>
				<text>4186283277</text>
			</view>
			<view class="order-item">
				<text>下单时间:</text>
				<text>2019-02-16 15:36:25</text>
			</view>
			<view class="order-item">
				<text>付款时间:</text>
				<text>2019-02-16 16:36:25</text>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="btn refund-btn" @click="applyRefund">申请退款</view>
			<view class="btn remind-btn" @click="remindShipment">提醒发货</view>
		</view>
	</view>
</template>

<script setup>
const goToGroupDetail = () => {
	uni.navigateTo({
		url: '/pages/my/order/group-detail'
	});
};

const applyRefund = () => {
	uni.navigateTo({
		url: '/pages/my/order/refund'
	});
};

const remindShipment = () => {
	uni.showToast({
		title: '已提醒商家发货',
		icon: 'none'
	});
};
</script>

<style>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 顶部成功提示 */
.success-header {
	position: relative;
	background-color: #FF5722;
	color: #FFFFFF;
	padding: 60rpx 40rpx;
	margin-bottom: 30rpx;
}

.success-title {
	font-size: 44rpx;
	font-weight: bold;
}

.success-subtitle {
	font-size: 28rpx;
	margin-top: 10rpx;
}

.success-icon {
	position: absolute;
	right: 60rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 120rpx;
	height: 120rpx;
}

/* 地址信息 */
.address-info {
	display: flex;
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.location-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.address-content {
	flex: 1;
}

.user-info {
	display: flex;
	margin-bottom: 10rpx;
}

.user-name {
	font-size: 32rpx;
	font-weight: bold;
	margin-right: 20rpx;
}

.user-phone {
	font-size: 32rpx;
	color: #666;
}

.user-address {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

/* 拼团信息 */
.group-info {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 30rpx;
	position: relative;
}

.group-icon-wrap {
	margin-right: 20rpx;
}

.group-user-icon {
	width: 60rpx;
	height: 60rpx;
}

.group-status {
	font-size: 32rpx;
	font-weight: bold;
}

.group-members {
	display: flex;
	margin-left: auto;
	margin-right: 30rpx;
}

.leader-container {
	position: relative;
	margin-right: 10rpx;
}

.member-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 2rpx solid #FF5722;
	margin-right: 10rpx;
}

.leader-tag {
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FF5722;
	color: #FFFFFF;
	font-size: 20rpx;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.group-detail-btn {
	color: #FF5722;
	border: 1rpx solid #FF5722;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
}

/* 商品信息 */
.product-card {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 30rpx;
	position: relative;
}

.product-info {
	display: flex;
}

.product-image {
	width: 180rpx;
	height: 180rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
}

.product-detail {
	flex: 1;
}

.product-name {
	font-size: 32rpx;
	margin-bottom: 10rpx;
	line-height: 1.4;
}

.product-package {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 50rpx;
}

.product-price {
	font-size: 32rpx;
	color: #FF5722;
}

.price-symbol {
	font-size: 28rpx;
}

.price-value {
	font-size: 36rpx;
	font-weight: bold;
}

.product-quantity {
	font-size: 28rpx;
	color: #999;
	margin-left: 20rpx;
}

.group-tag {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	background-color: #FF5722;
	color: #FFFFFF;
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}

/* 订单金额信息 */
.order-amount {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.amount-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.actual-payment {
	color: #333;
	font-weight: bold;
	border-top: 1rpx solid #EEEEEE;
	padding-top: 20rpx;
}

.payment-value {
	color: #FF5722;
	font-size: 32rpx;
}

/* 订单信息 */
.order-info {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.order-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

/* 底部按钮 */
.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 20rpx 30rpx;
	background-color: #FFFFFF;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.btn {
	flex: 1;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	border-radius: 40rpx;
	margin: 0 10rpx;
}

.refund-btn {
	border: 1rpx solid #FF5722;
	color: #FF5722;
}

.remind-btn {
	background-color: #FF5722;
	color: #FFFFFF;
}
</style>
